<template>
  <div class="record">
    <h3>看了该景点的人还看了</h3>
    <ul>
      <li class="clearFix record-list" v-for="itm in record" :key="itm.id">
        <div class="fl record-tu"><img :src="itm.imgUrl" alt=""></div>
        <div class="record-right">
          <div class="clearFix record-right-head">
            <div class="fl">{{itm.title}}</div>
            <div class="fr"><span><i>￥</i>189</span>起</div>
          </div>
          <div class="record-right-comment">★★★★★<span>18576条评论</span></div>
          <div class="record-right-address">{{itm.name}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        "record":[
          {
            "id":"01",
            "imgUrl":"http://img1.qunarzz.com/sight/p0/1505/18/18ffcca94b1b7ca2.water.jpg_228x168_f3ff9fb2.jpg",
            "title":"长恨歌",
            "name":"西安·华清宫"
          },{
            "id":"02",
            "imgUrl":"http://img1.qunarzz.com/sight/p0/1411/1a/5582f9f24bc50b475a8cbda4c5ac8d24.water.jpg_228x168_da6efe6d.jpg",
            "title":"秦始皇陵博物院（兵马俑）",
            "name":"西安·临潼区"
          },{
            "id":"03",
            "imgUrl":"http://img1.qunarzz.com/sight/p0/1902/8a/8aa77504c364b4b6a3.img.jpg_228x168_f94cefb2.jpg",
            "title":"大唐芙蓉园",
            "name":"西安·曲江旅游度假区"
          },{
            "id":"04",
            "imgUrl":"http://img1.qunarzz.com/sight/p0/201403/21/83a2599d05c5ce25b76b0675eff7fd84.jpg_228x168_4ace668e.jpg",
            "title":"大慈恩寺（大雁塔）",
            "name":"西安·曲江旅游度假区"
          },{
            "id":"05",
            "imgUrl":"http://img1.qunarzz.com/sight/p0/1505/18/18ffcca94b1b7ca2.water.jpg_228x168_f3ff9fb2.jpg",
            "title":"大明宫国家遗址公园",
            "name":"西安·曲江旅游度假区"
          },{
            "id":"06",
            "imgUrl":"http://img1.qunarzz.com/sight/p0/1412/84/f696c67a8052bb60e6fc51b0f9ba7388.water.jpg_228x168_b61d7e95.jpg",
            "title":"陕西历史博物馆",
            "name":"西安·曲江旅游度假区"
          }
        ]
      }
    }
  }
</script>
<style scoped>
  .record h3{
    position: relative;
    padding: 0 .2rem;
    height: .88rem;
    background: #fff;
    color: #333;
    font-size: .30rem;
    line-height: .88rem;
    text-indent: .2rem;
    font-weight: normal;
    border-bottom: 1px solid #f5f5f5;
  }
  .record h3:after{
    content:"";
    display: block;
    position: absolute;
    top: .3rem;
    left: .2rem;
    width: .06rem;
    height: .24rem;
    background: #1ba9ba;
    border-radius: .04rem;
  }
  .record ul{
    background: #fff;
    padding:0.2rem;
  }
  .record ul li{
    overflow:hidden;
  }
  .record-tu{
    width: 1.6rem;
    height: 1.6rem;
    float: left;
  }
  .record-tu img{
    display: block;
    width: 100%;
    height: 100%;
  }
  .record-right{
    float:left;
    width: 70%;
    font-size: .3rem;
    margin-left: 0.4rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid #f5f5f5;
  }
  .record-right .fr{
    float: right;
    position: relative;
    top:-0.3rem;
  }
  .record-right .fr i{
    font-size: .2rem;
    color: #ff9800;
  }
  .record-right .fr span{
    color: #ff9800;
  }
.record-right-comment{
  color: #ffb436;
  margin-bottom: .2rem;
}
  .record-right-comment span{
    margin-left: .1rem;
    line-height: .28rem;
    font-size: .24rem;
    vertical-align: middle;
    color: #9e9e9e;
  }
  .record-right-address{
    color: #9e9e9e;
    font-size: .24rem;
  }
  .record-right-head{
    height: .8rem;
  }
  .record-list{
    margin-bottom: .4rem;
  }
</style>
